<template>
  <div class="medical-record">
    <div class="record-header">
      <el-page-header @back="goBack">
        <template #content>
          <span class="record-title">病历详情</span>
        </template>
      </el-page-header>
      
      <div class="record-actions">
        <el-button @click="exportToPDF">
          <el-icon><Document /></el-icon>
          导出PDF
        </el-button>
        <el-button type="primary" @click="saveRecord">
          <el-icon><Save /></el-icon>
          保存病历
        </el-button>
      </div>
    </div>
    
    <div class="record-content">
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>患者姓名：</label>
              <span>{{ recordData.patientName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>性别：</label>
              <span>{{ recordData.gender }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>年龄：</label>
              <span>{{ recordData.age }}岁</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>就诊时间：</label>
              <span>{{ recordData.visitTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>科室：</label>
              <span>{{ recordData.department }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>医生：</label>
              <span>{{ recordData.doctor }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>主诉</span>
            <el-button 
              v-if="isEditable" 
              type="text" 
              @click="editSection('chiefComplaint')"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
          </div>
        </template>
        
        <div class="section-content">
          <p v-if="!editing.chiefComplaint">{{ recordData.chiefComplaint }}</p>
          <el-input 
            v-else
            v-model="recordData.chiefComplaint"
            type="textarea"
            :rows="4"
          />
        </div>
      </el-card>
      
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>现病史</span>
            <el-button 
              v-if="isEditable" 
              type="text" 
              @click="editSection('historyOfPresentIllness')"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
          </div>
        </template>
        
        <div class="section-content">
          <p v-if="!editing.historyOfPresentIllness">{{ recordData.historyOfPresentIllness }}</p>
          <el-input 
            v-else
            v-model="recordData.historyOfPresentIllness"
            type="textarea"
            :rows="6"
          />
        </div>
      </el-card>
      
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>既往史</span>
            <el-button 
              v-if="isEditable" 
              type="text" 
              @click="editSection('pastMedicalHistory')"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
          </div>
        </template>
        
        <div class="section-content">
          <p v-if="!editing.pastMedicalHistory">{{ recordData.pastMedicalHistory }}</p>
          <el-input 
            v-else
            v-model="recordData.pastMedicalHistory"
            type="textarea"
            :rows="4"
          />
        </div>
      </el-card>
      
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>体格检查</span>
            <el-button 
              v-if="isEditable" 
              type="text" 
              @click="editSection('physicalExamination')"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
          </div>
        </template>
        
        <div class="section-content">
          <p v-if="!editing.physicalExamination">{{ recordData.physicalExamination }}</p>
          <el-input 
            v-else
            v-model="recordData.physicalExamination"
            type="textarea"
            :rows="4"
          />
        </div>
      </el-card>
      
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>初步诊断</span>
            <el-button 
              v-if="isEditable" 
              type="text" 
              @click="editSection('diagnosis')"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
          </div>
        </template>
        
        <div class="section-content">
          <p v-if="!editing.diagnosis">{{ recordData.diagnosis }}</p>
          <el-input 
            v-else
            v-model="recordData.diagnosis"
            type="textarea"
            :rows="4"
          />
        </div>
      </el-card>
      
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span>处理意见</span>
            <el-button 
              v-if="isEditable" 
              type="text" 
              @click="editSection('treatmentPlan')"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
          </div>
        </template>
        
        <div class="section-content">
          <p v-if="!editing.treatmentPlan">{{ recordData.treatmentPlan }}</p>
          <el-input 
            v-else
            v-model="recordData.treatmentPlan"
            type="textarea"
            :rows="4"
          />
        </div>
      </el-card>
      
      <div v-if="isEditable" class="edit-actions">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="saveRecord">保存病历</el-button>
      </div>
    </div>
    
    <el-dialog
      v-model="showVersionHistory"
      title="版本历史"
      width="60%"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(version, index) in versionHistory"
          :key="index"
          :timestamp="version.timestamp"
          placement="top"
        >
          <el-card>
            <h4>版本 {{ versionHistory.length - index }}</h4>
            <p>{{ version.description }}</p>
            <el-button 
              size="small" 
              @click="viewVersion(version)"
            >
              查看详情
            </el-button>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { 
  ElPageHeader, 
  ElCard, 
  ElRow, 
  ElCol, 
  ElButton, 
  ElIcon, 
  ElInput, 
  ElDialog, 
  ElTimeline, 
  ElTimelineItem,
  ElMessage
} from 'element-plus'
import { 
  Document, 
  Save, 
  Edit 
} from '@element-plus/icons-vue'

const router = useRouter()

// 病历数据
const recordData = ref({
  patientName: '张三',
  gender: '男',
  age: 35,
  visitTime: '2023-05-15 14:30',
  department: '心内科',
  doctor: '李医生',
  chiefComplaint: '胸闷、气短3天，加重伴胸痛2小时',
  historyOfPresentIllness: '患者3天前无明显诱因出现胸闷、气短，休息后可缓解。2小时前症状加重，出现胸骨后压榨性疼痛，持续不缓解，伴有出汗、恶心，无放射痛。既往有高血压病史5年，血压控制不佳。',
  pastMedicalHistory: '高血压病史5年，血压最高160/100mmHg，未规律服药。否认糖尿病、冠心病史。无药物过敏史。',
  physicalExamination: '体温36.8℃，脉搏90次/分，呼吸20次/分，血压145/90mmHg。神志清楚，查体合作。双肺呼吸音清，未闻及干湿啰音。心率90次/分，律齐，未闻及杂音。腹软，无压痛，肝脾未触及。',
  diagnosis: '1. 冠心病 急性心肌梗死？\n2. 高血压病',
  treatmentPlan: '1. 立即急诊心电图、心肌酶检查\n2. 给予阿司匹林、氯吡格雷抗血小板聚集\n3. 硝酸甘油扩冠治疗\n4. 完善相关检查，必要时行急诊PCI治疗'
})

// 编辑状态
const isEditable = ref(true)
const editing = reactive({
  chiefComplaint: false,
  historyOfPresentIllness: false,
  pastMedicalHistory: false,
  physicalExamination: false,
  diagnosis: false,
  treatmentPlan: false
})

// 版本历史
const showVersionHistory = ref(false)
const versionHistory = ref([
  {
    id: 1,
    timestamp: '2023-05-15 15:30',
    description: '初步诊断完成',
    data: { ...recordData.value }
  },
  {
    id: 2,
    timestamp: '2023-05-15 16:45',
    description: '完善检查结果',
    data: { ...recordData.value }
  }
])

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 编辑某个部分
const editSection = (section) => {
  editing[section] = true
}

// 保存病历
const saveRecord = () => {
  // 重置编辑状态
  Object.keys(editing).forEach(key => {
    editing[key] = false
  })
  
  // 保存逻辑
  ElMessage.success('病历保存成功')
  console.log('保存病历:', recordData.value)
}

// 取消编辑
const cancelEdit = () => {
  // 重置编辑状态
  Object.keys(editing).forEach(key => {
    editing[key] = false
  })
  
  // 这里应该从服务器重新加载数据
  ElMessage.info('已取消编辑')
}

// 导出PDF
const exportToPDF = () => {
  ElMessage.success('正在导出PDF...')
  // 实际项目中这里会调用PDF导出功能
  console.log('导出PDF')
}

// 查看版本
const viewVersion = (version) => {
  console.log('查看版本:', version)
  // 这里可以打开版本详情弹窗
}
</script>

<style scoped>
.medical-record {
  padding: 20px;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.record-title {
  font-size: 18px;
  font-weight: 600;
}

.record-actions {
  display: flex;
  gap: 12px;
}

.record-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-item {
  margin-bottom: 12px;
}

.info-item label {
  font-weight: 500;
  color: #666;
}

.section-content p {
  line-height: 1.6;
  white-space: pre-line;
}

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
</style>